<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具箱 - 代码格式化</title>
    <!-- 引入Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <div class="flex items-center space-x-4">
                    <a href="#" class="flex items-center space-x-2">
                        <i class="fas fa-tools text-blue-600 text-2xl"></i>
                        <span class="font-bold text-xl text-blue-600">工具箱</span>
                    </a>
                </div>
                
                <div class="w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索工具..." class="w-full py-2 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
                        <button class="absolute right-0 top-0 mt-2 mr-4 text-gray-500">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-star mr-1"></i>收藏
                    </a>
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-clock mr-1"></i>历史
                    </a>
                    <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                        <i class="far fa-user-circle text-2xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="bg-purple-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">代码格式化</h1>
                    <p class="mt-2">美化并格式化您的代码，提高可读性和开发效率</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="#" class="hover:underline">首页</a>
                        <span>/</span>
                        <a href="#" class="hover:underline">开发工具</a>
                        <span>/</span>
                        <span class="font-medium">代码格式化</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏工具列表 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-800">开发工具</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="flex items-center text-purple-600 font-medium">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code"></i>
                                </div>
                                <span>代码格式化</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code-branch"></i>
                                </div>
                                <span>JSON格式化</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-search"></i>
                                </div>
                                <span>正则表达式测试</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <span>时间戳转换</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-hdd"></i>
                                </div>
                                <span>编码/解码</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-hashtag"></i>
                                </div>
                                <span>哈希计算</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-palette"></i>
                                </div>
                                <span>颜色选择器</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <!-- 最近使用记录 -->
                <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">最近使用</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>代码格式化</span>
                                    <p class="text-xs text-gray-500">10分钟前</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code-branch text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>JSON格式化</span>
                                    <p class="text-xs text-gray-500">昨天</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-image text-green-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>图片压缩</span>
                                    <p class="text-xs text-gray-500">3天前</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 主工具区域 -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <!-- 工具说明 -->
                    <div class="mb-6">
                        <h2 class="text-xl font-bold text-gray-800 mb-3">代码格式化</h2>
                        <p class="text-gray-600">
                            格式化并美化您的代码，使其更易阅读与维护。支持多种编程语言，自动缩进、对齐和语法高亮。
                        </p>
                    </div>
                    
                    <!-- 语言选择 -->
                    <div class="mb-6">
                        <label class="block text-gray-700 font-medium mb-2">编程语言</label>
                        <select class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                            <option>JavaScript</option>
                            <option>HTML</option>
                            <option>CSS</option>
                            <option>Python</option>
                            <option>Java</option>
                            <option>PHP</option>
                            <option>C#</option>
                            <option>C++</option>
                            <option>Ruby</option>
                            <option>Go</option>
                            <option>SQL</option>
                        </select>
                    </div>
                    
                    <!-- 输入区域 -->
                    <div class="mb-6">
                        <label class="block text-gray-700 font-medium mb-2">输入代码</label>
                        <textarea 
                            class="w-full h-64 p-4 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 font-mono text-sm"
                            placeholder="在此粘贴您的代码..."
                        >function example() {
    console.log("Hello World");
    var x=10;
    if(x>5){
  console.log("x is greater than 5");
  } else {
      console.log("x is less than or equal to 5");
      }
}</textarea>
                        <div class="mt-2 flex justify-between text-sm">
                            <span class="text-gray-500">字符数: 152</span>
                            <button class="text-purple-600 hover:underline">清空</button>
                        </div>
                    </div>
                    
                    <!-- 格式化选项 -->
                    <div class="mb-6">
                        <div class="bg-gray-100 p-4 rounded-md">
                            <h3 class="font-medium text-gray-800 mb-3">格式化选项</h3>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-gray-700 mb-1 text-sm">缩进大小</label>
                                    <select class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                        <option>2 空格</option>
                                        <option selected>4 空格</option>
                                        <option>Tab</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-gray-700 mb-1 text-sm">换行符</label>
                                    <select class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                        <option>LF (Unix/Linux)</option>
                                        <option>CRLF (Windows)</option>
                                        <option>CR (Mac)</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-gray-700 mb-1 text-sm">引号样式</label>
                                    <select class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                        <option>单引号 (')</option>
                                        <option>双引号 (")</option>
                                        <option>保持原样</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                <div class="flex items-center">
                                    <input type="checkbox" id="remove_semicolons" class="h-4 w-4 text-purple-600">
                                    <label for="remove_semicolons" class="ml-2 text-gray-700 text-sm">移除分号 (仅适用于JavaScript)</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="preserve_newlines" class="h-4 w-4 text-purple-600" checked>
                                    <label for="preserve_newlines" class="ml-2 text-gray-700 text-sm">保留换行符</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="brace_style" class="h-4 w-4 text-purple-600" checked>
                                    <label for="brace_style" class="ml-2 text-gray-700 text-sm">花括号在同一行</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="auto_format" class="h-4 w-4 text-purple-600" checked>
                                    <label for="auto_format" class="ml-2 text-gray-700 text-sm">自动格式化</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="mb-6 flex flex-wrap gap-3">
                        <button class="bg-purple-600 text-white py-2 px-6 rounded-md hover:bg-purple-700 font-medium">
                            格式化代码
                        </button>
                        <button class="bg-gray-200 text-gray-700 py-2 px-6 rounded-md hover:bg-gray-300 font-medium">
                            压缩代码
                        </button>
                        <button class="bg-gray-200 text-gray-700 py-2 px-6 rounded-md hover:bg-gray-300 font-medium">
                            还原原始代码
                        </button>
                    </div>
                    
                    <!-- 输出区域 -->
                    <div class="mb-6">
                        <div class="flex justify-between mb-2">
                            <label class="block text-gray-700 font-medium">格式化结果</label>
                            <div class="flex space-x-2">
                                <button class="text-purple-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-copy mr-1"></i> 复制
                                </button>
                                <button class="text-purple-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-file-download mr-1"></i> 下载
                                </button>
                            </div>
                        </div>
                        <div class="w-full h-64 p-4 border border-gray-300 rounded-md bg-gray-50 font-mono text-sm overflow-auto">
                            <pre class="text-gray-800">function example() {
    console.log("Hello World");
    var x = 10;
    if (x > 5) {
        console.log("x is greater than 5");
    } else {
        console.log("x is less than or equal to 5");
    }
}</pre>
                        </div>
                    </div>
                    
                    <!-- 说明和提示 -->
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">使用提示</h3>
                        <div class="text-gray-600 space-y-2">
                            <p>•&nbsp;&nbsp;格式化功能会自动修复缩进、空格和换行，使代码更易读</p>
                            <p>•&nbsp;&nbsp;压缩功能会移除所有不必要的空格、注释和换行，减小文件体积</p>
                            <p>•&nbsp;&nbsp;对于JavaScript，可选择是否保留分号</p>
                            <p>•&nbsp;&nbsp;格式化不会改变代码逻辑和功能</p>
                        </div>
                        
                        <div class="mt-6 bg-blue-50 p-4 rounded-md">
                            <h4 class="font-medium text-blue-800 mb-2">小贴士</h4>
                            <p class="text-blue-700 text-sm">
                                在团队协作中，使用统一的代码格式规范可以提高代码可读性和维护性。建议在项目中使用ESLint、Prettier等工具自动化格式化流程。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 相关工具 -->
                <div class="mt-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">相关工具</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-code-branch text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">JSON格式化</h3>
                                </div>
                                <p class="text-gray-600 text-sm">格式化、校验和美化JSON数据</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-search text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">正则表达式测试</h3>
                                </div>
                                <p class="text-gray-600 text-sm">测试和验证正则表达式匹配结果</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-file-code text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">HTML转义/反转义</h3>
                                </div>
                                <p class="text-gray-600 text-sm">对HTML字符进行转义或反转义处理</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">工具箱是一个提供各种在线工具的平台，旨在为用户提供便捷、高效的在线工具服务。</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">热门工具</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">图片压缩</a></li>
                        <li><a href="#" class="hover:text-white">JSON格式化</a></li>
                        <li><a href="#" class="hover:text-white">文本转换器</a></li>
                        <li><a href="#" class="hover:text-white">单位换算</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">常用链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">使用指南</a></li>
                        <li><a href="#" class="hover:text-white">用户协议</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                        <li><a href="#" class="hover:text-white">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 工具箱 版权所有</p>
            </div>
        </div>
    </footer>
</body>
</html> 